<template>
  <div>
    <!-- 统计卡片 -->
    <a-row :gutter="16" style="margin-bottom: 24px;">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="车辆总数"
            :value="statistics.totalVehicles"
            :prefix="h(CarOutlined)"
            :value-style="{ color: '#1890ff' }"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="客户总数"
            :value="statistics.totalCustomers"
            :prefix="h(UserOutlined)"
            :value-style="{ color: '#52c41a' }"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="本月保养数"
            :value="statistics.monthMaintenanceCount"
            :prefix="h(ToolOutlined)"
            :value-style="{ color: '#faad14' }"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="本月维修数"
            :value="statistics.monthRepairCount"
            :prefix="h(SettingOutlined)"
            :value-style="{ color: '#f5222d' }"
          />
        </a-card>
      </a-col>
    </a-row>

    <!-- 图表 -->
    <a-row :gutter="16" style="margin-bottom: 24px;">
      <a-col :span="12">
        <a-card title="月度保养维修趋势" :loading="loading">
          <div ref="trendChartRef" style="height: 300px;"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="费用分布" :loading="loading">
          <div ref="costChartRef" style="height: 300px;"></div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 费用统计 -->
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="本月保养费用">
          <a-statistic
            :value="statistics.monthMaintenanceCost"
            precision="2"
            prefix="¥"
            :value-style="{ color: '#faad14', fontSize: '28px' }"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="本月维修费用">
          <a-statistic
            :value="statistics.monthRepairCost"
            precision="2"
            prefix="¥"
            :value-style="{ color: '#f5222d', fontSize: '28px' }"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, h } from 'vue'
import { getStatistics } from '@/api/statistics'
import * as echarts from 'echarts'
import {
  CarOutlined,
  UserOutlined,
  ToolOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'

const loading = ref(false)
const statistics = ref({
  totalVehicles: 0,
  totalCustomers: 0,
  monthMaintenanceCount: 0,
  monthRepairCount: 0,
  monthMaintenanceCost: 0,
  monthRepairCost: 0,
  maintenanceTrend: [],
  repairTrend: [],
  costDistribution: []
})

const trendChartRef = ref(null)
const costChartRef = ref(null)

// 加载统计数据
const loadStatistics = async () => {
  loading.value = true
  try {
    const res = await getStatistics()
    statistics.value = res.data || {}
    
    // 延迟渲染图表，确保DOM已渲染
    setTimeout(() => {
      renderTrendChart()
      renderCostChart()
    }, 100)
  } catch (error) {
    console.error('加载统计数据失败：', error)
  } finally {
    loading.value = false
  }
}

// 渲染趋势图表
const renderTrendChart = () => {
  if (!trendChartRef.value) return
  
  const chart = echarts.init(trendChartRef.value)
  
  const maintenanceData = statistics.value.maintenanceTrend || []
  const repairData = statistics.value.repairTrend || []
  
  const months = [...new Set([
    ...maintenanceData.map(item => item.month),
    ...repairData.map(item => item.month)
  ])].sort()
  
  const maintenanceValues = months.map(month => {
    const item = maintenanceData.find(d => d.month === month)
    return item ? item.count : 0
  })
  
  const repairValues = months.map(month => {
    const item = repairData.find(d => d.month === month)
    return item ? item.count : 0
  })
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['保养数量', '维修数量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '保养数量',
        type: 'line',
        data: maintenanceValues,
        smooth: true,
        itemStyle: { color: '#faad14' }
      },
      {
        name: '维修数量',
        type: 'line',
        data: repairValues,
        smooth: true,
        itemStyle: { color: '#f5222d' }
      }
    ]
  }
  
  chart.setOption(option)
}

// 渲染费用分布图表
const renderCostChart = () => {
  if (!costChartRef.value) return
  
  const chart = echarts.init(costChartRef.value)
  
  const costData = statistics.value.costDistribution || []
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '费用分布',
        type: 'pie',
        radius: '60%',
        data: costData.map(item => ({
          name: item.type,
          value: item.value
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
}

onMounted(() => {
  loadStatistics()
})
</script>

<style scoped>
</style>

